<template>
  <div id="training-list">
    <ul class="jsd-card-list" v-infinite-scroll="getTraining" infinite-scroll-disabled="busy"
        infinite-scroll-distance="30">
      <li v-for="item of trainInfo">
        <div class="jsd-card-title" slot="card-title">
          <p>{{item.typeName}}</p>
          <i class="btn_toggle ion ion-ios-arrow-down" @click="toggle($event,item)"></i>
        </div>
        <ul class="jsd-card-body" slot="card-content" style="display:none">
          <li v-if="item.trainDate">
            <strong>培训时间：</strong>
            <span>{{item.trainDate | formatDate}}</span>
          </li>
          <li v-if="item.trainScore">
            <strong>分数：</strong>
            <span>{{item.trainScore}}分</span>
          </li>
          <li v-if="item.periodDateName">
            <strong>有效期：</strong>
            <span>{{item.periodDateName}}</span>
          </li>
          <li class="pos_r" v-if="item.trainSummarize">
            <strong>评语：</strong>
            
            <span>{{item.trainSummarize}}</span>
          </li>
        </ul>
      </li>
    </ul>
    <!--正在加载提示框-->
    <div is="loading" v-if="loadShow"></div>
    <!--加载失败弹框-->
    <div is="dialog-box" :message="dialogMessage" v-if="dialogShow" @close-dialog="closeDialog"
         @cancle-dialog="closeDialog"></div>
    <div class="no_data" v-if="!trainInfo.length">
      <i class="ion ion-ios-paper-outline"></i>
      <p>暂无数据</p>
    </div>
  </div>

</template>
<script type="text/javascript">
  import '../../assets/css/training_records.scss';
  import interfaceAPI from '../../assets/js/insterface';
  import http from '../../assets/js/http_mixin'
  var trainingRecordUrl = interfaceAPI.trainingRecordUrl;
  export default{
    data(){
      return {
        trainInfo: [],
        pageTotle: '',               // 总页数
        busy: false,
        count: 0                     // 当前页
      }
    },
    mixins: [http],
    methods: {
      getTraining(){
        var vue = this;
        this.busy = true;
        if (this.pageTotle > this.count && this.trainInfo.length > 0) {
          vue.getData();
        }
      },
      getData(){
        this.getInfo({
          url: trainingRecordUrl,
          param: {
            'num': this.$route.query.empNo,
            'currentPage': this.count,
            'pageSize': '2'
          },
          success: function (response) {
            console.log(response);
            var responseData = response.body.data;
            this.pageTotle = response.body.pages;
            if (this.pageTotle >= this.count) {
              // for(let tainVal of responseData){
              //   tainVal.trainSummarizeShow = false;
              // }
              if (responseData.length > 0) {
                for (var i = 0; i < responseData.length; i++) {
                  this.trainInfo.push(responseData[i]);
                }
                this.count++;
              }
            }
            this.busy = false;
          },
          fail: function (response) {
            this.dialogMessage = '请求失败，请稍后再试';
            this.dialogShow = true;
          }
        })
      },
      toggle(obj,item){
        let curObj = obj.currentTarget;
        let contentObj = obj.currentTarget.parentNode.nextElementSibling;

        if(curObj.className == "btn_toggle ion ion-ios-arrow-down"){
          curObj.className = "btn_toggle ion ion-ios-arrow-up";
          // item.trainSummarizeShow = true;
          contentObj.style.display = "block";
        }else{
          curObj.className = "btn_toggle ion ion-ios-arrow-down";
          // item.trainSummarizeShow = false;
          contentObj.style.display = "none";
        }
        // console.log(obj)
        // console.log(item.trainSummarizeShow)

      }
    },
    mounted(){
      document.title = '培训信息';
      this.getData();
    }
  }
</script>

<style type="text/css">
  .btn_toggle{
    position: absolute;
    width:2rem;
    height:2rem;
    /*background: red;*/
    text-align: center;
    line-height: 2rem;
    right:0;
    top:23px;
    font-size: 2.4rem;
  }
</style>
